<template>
    <div>
        <div class="main_operation">
            <div class="operation_left">
                <a-button v-if="routerShow($route,'equipment_add')" class="mr10" type="primary" @click="addBtn">添加</a-button>
                <a-button v-if="routerShow($route,'equipment_delete')" class="mr10" type="danger" @click="batchDelBtn">批量删除</a-button>
                  <a-button type="primary" @click="downloadBtn">下载数据</a-button>
            </div>
            <div class="operation_right">
              <a-select class="mr10" v-model="searchType" style="width: 180px" placeholder="搜索类型">
                <a-select-option value="name">设备名称</a-select-option>
                <a-select-option value="company_name">公司名称</a-select-option>
                <a-select-option value="equipment_code">设备MAC地址</a-select-option>
              </a-select>
              <a-input-search class="mr10" style="width:300px;"
                v-model="searchVal"
                :placeholder="searchPlace"
                @search="onSearch"
                enterButton />
                <a-button class="mr10" type="danger" @click="onSearch('reSearch')">重置</a-button>

            </div>
        </div>
        <div class="main">
            <a-table bordered :pagination="false" :loading="tableLoad" :columns="Fields" :dataSource="dataLists.data" :rowSelection="{ fixed: true, selectedRowKeys: selectedRowKeys, columnWidth: 40, onChange: onSelectChange }" :rowKey="record => record.id" :scroll="{x: 1400, y: 500 }">
                <template slot="status" slot-scope="text, record">
                    <a-icon v-if="record.status == '在线'" title="在线" theme="filled" style="fontSize: 24px; color: #52c41a;" type="check-circle" />
                    <a-icon v-else title="离线" theme="filled" style="fontSize: 24px;color: #fe5d58;" type="exclamation-circle" />
                </template>
                <template slot="img_pic" v-if="record.img_pic" slot-scope="text, record">
                    <a :href="record.img_pic" target="_blank">
                        <img :src="record.img_pic" alt="设备图片" height="30px">
                    </a>
                </template>
                <template slot="action" slot-scope="text, record">
                    <a-button v-if="routerShow($route,'equipment_detail')" size="small" class="mr5" type="primary" @click="details(record)">详情</a-button>
                    <a-button v-if="routerShow($route,'equipment_update')" size="small" class="mr5" type="primary" @click="editBtn(record)">编辑</a-button>
                    <a-button v-if="routerShow($route,'equipment_delete')" size="small" type="danger" @click="delBtn(record)">删除</a-button>
                </template>
            </a-table>
            <div class="pageBox">
                <a-pagination :total="dataLists.total" :showTotal="total => `共 ${total} 条数据`" :pageSize="dataLists.per_page" :defaultCurrent="1" @change="pageChange" />
            </div>
        </div>
        <!-- 详情 -->
        <a-modal :destroyOnClose="true" title="详情" v-model="detaiVisible" width="70%">
            <template slot="footer">
                <a-button key="submit" type="primary" @click="detaiVisible = false">确定</a-button>
            </template>
            <a-spin :spinning="detailsLoad">
                <a-form>
                    <h3 class="modelTitle">基本信息</h3>
                    <a-form-item label="设备名称" :label-col="{ md: 5 ,xs: 24 }" :wrapper-col="{ md: 12 ,xs: 24 }">
                        {{itemDetail.name}}
                    </a-form-item>
                    <a-form-item label="设备分组" :label-col="{ md: 5 ,xs: 24 }" :wrapper-col="{ md: 12 ,xs: 24 }">
                        {{itemDetail.name}}
                    </a-form-item>
                    <a-form-item label="设备描述" :label-col="{ md: 5 ,xs: 24 }" :wrapper-col="{ md: 12 ,xs: 24 }">
                        {{itemDetail.describe}}
                    </a-form-item>
                    <a-form-item label="设备信息" :label-col="{ md: 5 ,xs: 24 }" :wrapper-col="{ md: 12 ,xs: 24 }">
                        <a-form>
                            <a-form-item label="隧道外尺寸：" :label-col="{ span: 5 }" :wrapper-col="{ md: 19 ,xs: 24}">
                                长：{{itemDetail.tunnel_abroad_long}} 米
                                宽：{{itemDetail.tunnel_abroad_width}} 米
                                高：{{itemDetail.tunnel_abroad_height}} 米
                            </a-form-item>
                            <a-form-item label="隧道长度：" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
                                {{itemDetail.tunnel_long}} 米
                            </a-form-item>
                            <a-form-item label="可装载面：" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
                                宽：{{itemDetail.carry_width}}
                                高：{{itemDetail.carry_height}}
                                单位（mm）
                            </a-form-item>
                            <a-form-item label="选用板棚规格：" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
                                {{itemDetail.board_specs}}
                            </a-form-item>
                            <a-form-item label="棚板安放：" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
                                {{itemDetail.board_put}}
                            </a-form-item>
                            <a-form-item label="台车长度：" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
                                {{itemDetail.trolley_long}}
                            </a-form-item>
                            <a-form-item label="台车数：" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
                                {{itemDetail.trolley_num}}
                            </a-form-item>
                            <a-form-item label="窑内总容积：" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
                                {{itemDetail.kiln_volume}}
                            </a-form-item>
                            <a-form-item label="台车可装载容积：" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
                                {{itemDetail.trolley_volume}}
                            </a-form-item>
                        </a-form>
                    </a-form-item>
                    <a-form-item label="设备图片：" :label-col="{ md: 5 ,xs: 24 }" :wrapper-col="{ span: 12 }">
                        <a v-if="itemDetail.img_pic" :href="itemDetail.img_pic" target="_blank">
                            <img width="200" :src="itemDetail.img_pic" alt="">
                        </a>
                        <span v-else style="color: #999;">无设备图片</span>
                    </a-form-item>
                    <h3 class="modelTitle">基本协议（二）</h3>
                    <a-form-item label="采集频率" :label-col="{ md: 5 ,xs: 24 }" :wrapper-col="{ md: 12 ,xs: 24 }">
                        {{itemDetail.acquisition_frequency}}
                    </a-form-item>
                    <a-form-item label="设备MAC地址" :label-col="{ md: 5 ,xs: 24 }" :wrapper-col="{ md: 12 ,xs: 24 }" style="margin-left:38px">
                        {{itemDetail.equipment_code}}
                    </a-form-item>
                    <a-form-item label="设备类型" :label-col="{ md: 5 ,xs: 24 }" :wrapper-col="{ md: 12 ,xs: 24 }">
                        {{itemDetail.equipment_type}}
                    </a-form-item>
                    <a-form-item label="设备地址" :label-col="{ md: 5 ,xs: 24 }" :wrapper-col="{ md: 12 ,xs: 24 }">
                        {{itemDetail.equipment_address}}
                    </a-form-item>
                </a-form>
            </a-spin>
        </a-modal>
    </div>
</template>

<script>
import {
  mapState,
  mapActions,
} from 'vuex';

export default {
  name: 'List',
  data() {
    return {
      /* 通用模块 */
      // 列表
      searchType: 'name',
      searchVal: '',
      tableLoad: false, // 列表loading状态
      formList: {
        // 列表信息
        page: 1,
      },
      selectedRowKeys: [], // 勾选的id
      /* 通用模块end */
      groupId: [], // 分组设备
      detaiVisible: false, // 详情窗口
      detailsLoad: false,
    };
  },
  computed: {
    ...mapState({
      Fields: state => state.equipment.Fields,
      dataLists: state => state.equipment.dataLists,
      requestCode: state => state.equipment.requestCode,
      itemDetail: state => state.equipment.itemDetail,
      permissAll: state => state.equipment.permissAll,
      groupData: state => state.group.groupData,
    }),
    searchPlace() {
      if (this.searchType == 'name') {
        return '请输入设备名称'
      } else if(this.searchType == 'company_name') {
        return '请输入公司名称'
      } else if(this.searchType == 'equipment_code') {
        return '请输入设备MAC'
      }
    }
  },
  mounted() {
    if (this.$route.query.group_id != undefined) {
      this.formList.group_id = this.$route.query.group_id;
    }
    this.changeData();
    this.groupAll();
  },
  methods: {
    //搜索
    onSearch(val) {
      if(val == 'reSearch') {
        this.searchType = 'name'
        this.searchVal = ''
        this.formList = {
          page: 1
        }
      } else if (this.searchType == 'name') {
        this.formList = {
          name: val,
          page: 1
        }
      } else if(this.searchType == 'company_name') {
        this.formList = {
          company_name: val,
          page: 1
        }
      } else if(this.searchType == 'equipment_code') {
        this.formList = {
          equipment_code: val,
          page: 1
        }
      }
      this.changeData()
    },
    ...mapActions({
      getLists: 'equipment/getLists', // 列表
      dataDel: 'equipment/dataDel', // 删除
      dataDetail: 'equipment/dataDetail', // 详情
      equipmentAll: 'equipment/equipmentAll', // 设备名称信息
      groupAll: 'group/groupAll', // 设备分组信息
      equipmentExportData: 'equipment/equipmentExportData', // 设备列表导出
    }),
    /* 通用模块 */
    // 下载导出
    downloadBtn() {
      console.log('点我下载');
      // 载
      this.equipmentExportData(this.formList).then((res) => {
        console.log(res);
        const execlName = '设备报表导出';
        if (res.data.type == 'application/json') {
				            this.$message.error('查询数据为空');
				        } else {
				            const blob = new Blob(
				                [res.data], {
				                    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
				                },
          );
				            const aEle = document.createElement('a'); // 创建a标签
				            const href = window.URL.createObjectURL(blob); // 创建下载的链接
				            aEle.href = href;
				            aEle.download = execlName; // 下载后文件名
				            document.body.appendChild(aEle);
				            aEle.click(); // 点击下载
				            document.body.removeChild(aEle); // 下载完成移除元素
				            window.URL.revokeObjectURL(href); // 释放掉blob对象

				            this.$message.success('导出成功');
				        }
      });
    },
    // 勾选
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    // 重新获取列表数据
    changeData() {
      this.tableLoad = true;
      setTimeout(() => {
        this.getLists(this.formList);
        this.tableLoad = false;
      }, 800);
    },
    // 页码
    pageChange(page) {
      this.formList.page = page;
      this.getLists(this.formList);
    },
    /* 通用模块end */

    // 添加跳转
    addBtn() {
      this.$router.push({
        path: '/equipment/Add',
        query: {
          tabsKey: 1,
        },
      });
    },
    // 编辑跳转
    editBtn(item) {
      this.$router.push({
        path: '/equipment/Edit',
        query: {
          equipment_id: item.id,
          tabsKey: 1,
          edit: true,
        },
      });
    },
    // 删除
    delBtn(item) {
      console.log(item);
      const _this = this;
      const idArr = {
        ids: [],
      };
      idArr.ids.push(item.id);
      this.$confirm({
        title: '您确定要删除该数据吗?',
        content: '删除后将不可恢复,请仔细核对!',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          _this.dataDel(idArr);
          _this.changeData();
        },
      });
    },
    // 批量删除
    batchDelBtn() {
      if (this.selectedRowKeys.length <= 0) {
        this.$warning({
          title: '提示',
          content: '请先勾选需要删除的设备',
        });
        return false;
      }
      const _this = this;
      const idArr = {
        ids: this.selectedRowKeys,
      };
      this.$confirm({
        title: '您确定要删除勾选的设备吗?',
        content: '删除后将不可恢复,请仔细核对!',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          _this.dataDel(idArr);
          _this.changeData();
        },
      });
    },
    /* 详情 */
    details(item) {
      this.detaiVisible = true;
      this.detailsLoad = true;
      this.dataDetail(item.id);
      setTimeout(() => {
        this.detailsLoad = false;
      }, 800);
    },
    exportBtn() {
      alert('未开发');
    },
  },
};
</script>

<style scoped>
</style>
